<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>chat</title>
</head>
<style>
    .mstitle,
    .msbox {
        display: flex;
        flex-direction: row;
    }

    .msgbox {
        margin: 6px;
        width: 400px;
        height: 400px;
        border: 1px solid darkgrey;
        overflow: auto;
        word-break: break-all
    }

    .msgtip {
        margin: 6px;
        width: 300px;
        height: 400px;
        border: 1px solid darkgrey;
        overflow: auto;
        word-break: break-all
    }

    .boxtitle,
    .tiptitle {
        margin: 6px;
        width: 400px;
        height: 20px;

    }

    .sendbox {
        margin: 6px;
    }
</style>

<body>
    <div class="chatdiv">
        <div class="mstitle">
            <div class="boxtitle">
                聊天信息
            </div>
            <div class="tiptitle">
                提示信息
            </div>
        </div>
        <div class="msbox">
            <div class="msgbox">
            </div>
            <div class="msgtip">
            </div>
        </div>
        <div class="sendbox">
            <div>
                <input type="text" id="linkval" placeholder="连接">
                <input type="button" value="连接" id="connbtn">
                <input type="button" value="清空聊天框" id="clsbtn">
            </div>
            <input type="text" id="nickval" placeholder="昵称">
            <input type="text" id="msgval" placeholder="发送内容">
            <input type="button" value="确定" id="sendbtn">
        </div>
    </div>
</body>
<script>

    let socket = '';
    // 连接
    const connbtn = document.querySelector('#connbtn');
    connbtn.addEventListener('click', function () {

        let nicktxt = document.querySelector('#nickval').value;
        let linktxt = document.querySelector('#linkval').value;
        let messageTip = document.querySelector('.msgtip');
        messageTip.innerHTML = "";
        if (linktxt.length == 0) {
            messageTip.innerHTML += "输入连接!<br>";
            return
        }
        if (nicktxt.length == 0) {
            messageTip.innerHTML += "输入昵称!<br>";
            return
        }


        // 创建WebSocket连接
        let weblink="wss://"+linktxt
        socket = new WebSocket(weblink);
        socket.onopen = function (e) {
            // 连接成功后，发送一条消息
            console.log(e)
            socket.send(`【${nicktxt}】已连接!`);
            connbtn.setAttribute("disabled", true);


        }
        // 接收消息
        socket.onmessage = function (e) {
            // 接收到消息后，显示在页面上
            const messageShow = document.querySelector('.msgbox');
            // messageElement.textContent = event.data;
            messageShow.innerHTML += e.data + "<br>";
            messageShow.scrollTop = messageShow.scrollHeight;

        }
        // 
        socket.onclose = function (e) {
            console.log("close")
            console.log(e)
            let messageTip = document.querySelector('.msgtip');
            messageTip.innerHTML += "连接已关闭!<br>";
            connbtn.removeAttribute("disabled");
        }
        // 
        socket.onerror = function (e) {
            console.log("error:")
            console.log(e)
            let messageTip = document.querySelector('.msgtip');
            messageTip.innerHTML = "";
            messageTip.innerHTML += "连接错误!<br>";
            connbtn.removeAttribute("disabled");
        }

    })
    // 清空聊天框
    let msgcls = document.querySelector('#clsbtn');
    msgcls.addEventListener('click', function () {
        let messageShow = document.querySelector('.msgbox');
        let conf = confirm("确定要清除吗？");
        if (conf) {
            messageShow.innerHTML = "";
        }
    })

    // 发送
    const msgsend = document.querySelector('#sendbtn');
    msgsend.addEventListener('click', function () {
        let messageTip = document.querySelector('.msgtip');
        messageTip.innerHTML = "";
        if (!socket) {
            messageTip.innerHTML += "未连接!<br>";
            return;
        }
        // console.log(socket.readyState)
        let msgtxt = document.querySelector('#msgval').value;
        let nicktxt = document.querySelector('#nickval').value;
        if (nicktxt.length == 0) {
            messageTip.innerHTML += "输入昵称!<br>";
            return
        }
        if (msgtxt.length == 0) {
            messageTip.innerHTML += "输入发送内容!<br>";
            return
        }
        let sendata = `${nicktxt}：${msgtxt}`;
        socket.send(sendata);
    })




</script>

</html>